<template>
	<view>
		<template v-if="searchList.length === 0">
			<!-- 搜索历史 -->
			<view class="py-2 px-2 font-md">搜索历史</view>
			<view class="flex flex-wrap">
				<view class="border rounded font mx-2 my-1 px-2" v-for="(item,index) in list" :key="index" hover-class="bg-light"
				 @click="clickSearchHistory(item)">{{item}}</view>
			</view>
		</template>
		<template v-else>
			<block v-for="(item,index) in searchList" :key="index">
				<template v-if="type === 'post'">
					<!-- 帖子搜索列表 -->
					<common-list :item="item" :index="index"></common-list>
				</template>
				<template v-else-if="type === 'topic'">
					<!-- 话题搜索列表 -->
					<topic-list :item="item" :index="index"></topic-list>
				</template>
				<template v-else>
					<!-- 用户搜索列表 -->
					<user-list :item="item" :index="index"></user-list>
				</template>
			</block>
		</template>
	</view>
</template>

<script>
	// 帖子列表测试数据
	const demo1 = [{
		username: "昵称1",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题1",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "support",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称2",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题2",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "unsupport",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称2",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题2",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}]

	// 话题列表测试数据
	const demo2 = [{
		cover: '/static/demo/topicpic/1.jpeg',
		title: '话题名称1',
		desc: '话题描述1',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/3.jpeg',
		title: '话题名称2',
		desc: '话题描述2',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/4.jpeg',
		title: '话题名称3',
		desc: '话题描述3',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/5.jpeg',
		title: '话题名称4',
		desc: '话题描述4',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/6.jpeg',
		title: '话题名称5',
		desc: '话题描述5',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/7.jpeg',
		title: '话题名称6',
		desc: '话题描述6',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/8.jpeg',
		title: '话题名称7',
		desc: '话题描述7',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/9.jpeg',
		title: '话题名称8',
		desc: '话题描述8',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/10.jpeg',
		title: '话题名称9',
		desc: '话题描述9',
		news_count: 10,
		today_count: 10
	}, {
		cover: '/static/demo/topicpic/11.jpeg',
		title: '话题名称10',
		desc: '话题描述10',
		news_count: 10,
		today_count: 10
	}]

	// 用户列表测试数据
	const demo3 = [{
		avatar: '/static/default.jpg',
		username: '昵称',
		sex: 0, // 0 未知，1 女，2 男
		age: 24,
		isFollow: true
	}, {
		avatar: '/static/default.jpg',
		username: '昵称',
		sex: 1,
		age: 24,
		isFollow: false
	}, {
		avatar: '/static/default.jpg',
		username: '昵称',
		sex: 2,
		age: 24,
		isFollow: false
	}]
	import commonList from '@/components/common/common-list.vue'
	import topicList from '@/components/news/topic-list.vue';
	import userList from '@/components/user-list/user-list.vue';
	export default {
		components: {
			commonList,
			topicList,
			userList
		},
		data() {
			return {
				// 搜索文本
				searchText: "",
				list: [
					'uni-app第二季商城类实战开发',
					'uni-app第三季仿微信实战开发',
					'实战教程',
					'系列教程'
				],
				// 搜索列表
				searchList: [],
				// 当前搜索类型(默认搜索帖子)
				type: 'post'
			}
		},
		// 监听搜索框输入变化事件
		onNavigationBarSearchInputChanged(e) {
			this.searchText = e.text
		},
		// 监听搜索按钮点击事件
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				this.searchEvent()
			}
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type
			}
			let pageTitle = '帖子'
			switch (this.type) {
				case 'post':
					pageTitle = '帖子'
					break;
				case 'topic':
					pageTitle = '话题'
					break;
				case 'user':
					pageTitle = '用户'
					break;
			}
			// #ifdef APP-PLUS
			// 修改搜索占位符
			// 有一定概率会出现这样的错误(原因未知):TypeError: undefined is not an object (evaluating 'tn.searchInput') __ERROR
			let currentWebview = this.$mp.page.$getAppWebview()
			let tn = currentWebview.getStyle().titleNView
			tn.searchInput.placeholder = '搜索' + pageTitle
			currentWebview.setStyle({
				titleNView: tn
			})
			// #endif
		},
		methods: {
			clickSearchHistory(text) {
				this.searchText = text
				this.searchEvent()
			},
			// 搜索事件
			searchEvent() {
				// 收起键盘
				uni.hideKeyboard()
				// 显示loading状态
				uni.showLoading({
					title: '加载中...',
					mask: false
				})
				// 请求搜索接口
				setTimeout(() => {
					console.log('调用搜索接口:', this.type)
					switch (this.type) {
						case 'post':
							this.searchList = demo1
							break;
						case 'topic':
							this.searchList = demo2
							break;
						case 'user':
							this.searchList = demo3
							break;
					}
					// 隐藏loading状态
					uni.hideLoading()
				}, 3000)
			}
		}
	}
</script>

<style>

</style>
